<template>
  <div class="main">
    <Head>
      <Title>测试Title组件</Title>
    </Head>
    <el-row class="mb-4">
      <NuxtLink to="/login" style="margin-right: 12px">
        <el-button type="primary">跳转</el-button>
      </NuxtLink>
      <el-button type="primary" @click="setLocale('en')">英文</el-button>
      <el-button type="success" @click="setLocale('zh')">中文</el-button>
      <el-button type="info" @click="getData">调用接口</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Dangerd</el-button>
      <el-button type="info">{{ $t('messages') }}</el-button>
      <el-button type="warning">{{ $t('welcome') }}</el-button>
      <el-button type="danger">{{ userPinia.userinfo.ok }}</el-button>
    </el-row>
    <el-row>
      <div class="flex flex-col items-start gap-4">
        <client-only>
          <el-space wrap :size="20">
            <el-segmented v-model="value" :options="options" size="large" />
            <el-segmented v-model="value" :options="options" size="default" />
            <el-segmented v-model="value" :options="options" size="small" />
          </el-space>
        </client-only>
      </div>
    </el-row>
    <el-row :gutter="12">
      <transition-group
        appear
        name="animate__animated animate__bounc"
        enter-active-class="animate__flipInX"
        leave-active-class="animate__flipOutX"
      >
        <el-col
          style="margin: 10px 0"
          :span="4"
          v-for="(item, index) in liveList"
          :key="item.id"
          @click="removeTage(index)"
        >
          <el-card style="max-width: 480px; height: 100%">
            <template #header>{{ item.title }}</template>
            <img :src="item.cover" style="width: 100%" />
            <template #footer>{{ item.notice }}</template>
          </el-card>
        </el-col>
      </transition-group>
    </el-row>
  </div>
</template>

<script setup>
const { locale, setLocale } = useI18n();
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
const userPinia = useUserPinia();
let params = {
  page: 1,
  pageSize: 12,
  // roleType: 2,
  isHost: 1,
};
onMounted(() => {
  getData();
});
// const datalive = await hello(params);
// console.log(datalive, 'datalive');
const liveList = ref([]);
const getData = () => {
  hello(params).then((res) => {
    liveList.value = liveList.value.concat(res.data.list);
    params.page++;
  });
};
getData();
const removeTage = (index) => {
  debounce(
    () => {
      liveList.value.splice(index, 1);
    },
    300,
    true,
  );
};
// const runtimeConfig = useRuntimeConfig();
// console.log(runtimeConfig);
const router = useRouter();

const value = ref('虎');
const options = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  overflow: hidden;
}
</style>
